import React, { useEffect, useMemo } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { async_updatecarlist, async_getcarlist } from '../store/Slice'
import { Cell, Divider, Image, Checkbox, Stepper, SubmitBar, Typography, NavBar } from 'react-vant'
import { useNavigate } from 'react-router-dom'

export default function Shoplist() {

  //获取数据
  let dispatch = useDispatch()
  useEffect(() => {
    dispatch(async_getcarlist())
  }, [])
  let obj = useSelector(state => state.crms1)
  //console.log(obj);

  //全选
  const isAll = obj.carlist.length > 0 && obj.carlist.every(item => {
    return item.checked
  })

  //计算价格
  let priceTotal = useMemo(() => {
    return obj.carlist.reduce((p, n) => {
      if (n.checked) {
        return p + n.price * n.num
      }
      return p
    }, 0)

  }, [obj.carlist])

  //计算数量
  let numTotal = useMemo(() => {
    return obj.carlist.reduce((p, n) => {
      if (n.checked) {
        return p + n.num
      }
      return p
    }, 0)
  }, [obj.carlist])

  let navigate = useNavigate()


  return (
    <div style={{ position: 'relative' }}>
      {/* 返回到首页 */}
      <NavBar
        title="标题"
        leftText="返回"
        rightText="按钮"
        onClickLeft={() => {
          navigate('/car')
        }}
        onClickRight={() => { }}
      />
      {/* 用户列表 */}
      {
        obj.carlist.map(item => {
          return <Cell
            center
            key={item.id}
            title={item.title}
            label={item.price}
            icon={<div>
              <div style={{ marginRight: '5px' }}>
                <Checkbox checked={item.checked} onChange={() => {
                  //状态切换
                  let obj = {
                    ...item,
                    "checked": !item.checked,
                  }
                  //执行方法
                  dispatch(async_updatecarlist(obj))
                }} />
              </div>
              <div>
                <Image width={44} height={44} src={item.img} round />
              </div>
            </div>}
            value={
              /* 步进器 */
              <Stepper
                min={1}
                value={item.num}
                onChange={v => {
                  let obj = {
                    ...item,
                    num: v
                  }
                  //执行编辑方法
                  dispatch(async_updatecarlist(obj))
                }}
              />
            }
          />

        })
      }

      {/* 底部区域 提交订单栏*/}
      <div>
        <SubmitBar
          price={priceTotal * 100}

          buttonText="提交订单"
        >
          <Checkbox checked={isAll} onChange={(checked) => {
            obj.carlist.forEach(item => {
              let obj = {
                ...item,
                checked: checked
              }
              //执行编辑的方法
              dispatch(async_updatecarlist(obj))
            })
          }}>全选</Checkbox>
        </SubmitBar>
        <div style={{ position: 'absolute', right: '25px', top: '590px' }} >
          总数量:{numTotal}
        </div>
      </div>

    </div>
  )
}
